<template>
	<view class="main" @click="linkTo(dataItem)">
		<view class="item-left" >
			<u-avatar level-size="90" level-icon="../../../static/img/community/ic_daka.png"
				:show-level="!!Number(dataItem.starFlag)" mode="circle" :src="`${$store.state.img_url}${dataItem.avatar}`" img-mode="aspectFill">
			</u-avatar>
			
			<!-- <img :src="`${$store.state.userInfo.img_url}${dataItem.avatar}`" alt="" srcset=""> -->
		</view>
		<view class="item-center">
			<view class='center-title'>{{ dataItem.nickName }}</view>
			<view class='center-info one-line-text'>{{ dataItem.intro }}</view>

		</view>
		<view class="item-right" v-if="dataItem.authorId !== $store.state.userInfo.id">
			<u-follow-button :userFrom="false" @clkFollow="clkFollow(dataItem)" 
			:itemData="dataItem"
			:type=1 :isFollowed="dataItem.attentionFlag === '1' ? true : false"></u-follow-button>
		</view>

		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		name: "u-item-userinfo",
		data() {
			return {};
		},
		props: {
			current: {
				type: Number,
				default: 0
			},
			// 背景颜色
			itemData: {
				type: Object,
				default () {
					return {
						// title: '陆小凤',
						// imgUrl: "",
						// dateTime: 215635212,
						// majorStr: '专业A,专业B,专业C',
						// info: "三星（SAMSUNG）R 京东微联 智能语音 教育能语音 教育资源",
						// isVip: false,
						// isFollow: true,
					}
				}
			},
			dataItem: {
				type: Object,
				default () {
					return {
						// title: '陆小凤',
						// imgUrl: "",
						// dateTime: 215635212,
						// majorStr: '专业A,专业B,专业C',
						// info: "三星（SAMSUNG）R 京东微联 智能语音 教育能语音 教育资源",
						// isVip: false,
						// isFollow: true,
					}
				}
			}
		},
		onLoad() {},
		methods: {
			linkTo(itemData) {
				console.log("itemData", itemData)
				this.$u.route({ 
					url: "pages/tabbar/tabbar-1/personHome",
					params: {
						id: itemData.authorId
					}
				})
			},
			clkFollow(itemData) {
				if (itemData.attentionFlag !== "1") {
					this.$emit("follow", itemData)
				}
				
			}
		},
		computed: {
			majorArray: function() {
				return this.itemData.majorStr.split(",");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		text-align: center;
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		// border-bottom: 2rpx solid #BFBFBF;
		// margin: 0rpx 40rpx;
		// padding: 20rpx 0rpx;

		// background-color: red;

		.item-right {
			height: 100%;
			justify-content: center;
			align-self: center;
		}

		.item-center {
			margin-left: 23rpx;
			display: flex;
			flex-flow: column nowrap;
			align-items: flex-start;
			width: 100%;

			.center-title {
				width: 100%;
				margin-top: 6rpx;
				font-size: 36rpx;
				font-family: SimHei;
				font-weight: 400;
				color: #404F76;
				opacity: 1;
				flex-grow: 1;
				text-align: left;
				font-weight: 500;
			}



			.center-info {
				// width: 305rpx;
				// margin-top: 18rpx;
				font-size: 24rpx;
				font-family: SimHei;
				font-weight: 400;
				// line-height: 21rpx;
				color: #404F76;
				// opacity: 1;
				text-align: left;
			}
		}

		.item-left {}

	}



	.btn-follow {
		width: 120rpx;
		height: 40rpx;
		background: #3FA7FF;
		box-shadow: -4rpx -4rpx 12rpx #FFFFFF;
		opacity: 1;
		border-radius: 8rpx;

		font-size: 23rpx;
		font-family: SimHei;
		font-weight: 400;
		line-height: 31rpx;
		color: #E9EBF4;
		opacity: 1;

		// background: #E9EBF4;
	}

	.btn-nofollow {
		width: 120rpx;
		height: 40rpx;
		background: #E9EBF4;
		box-shadow: -4rpx -4rpx 12rpx #FFFFFF;
		opacity: 1;
		border-radius: 8rpx;

		font-size: 23rpx;
		font-family: SimHei;
		font-weight: 400;
		line-height: 31rpx;
		color: #4D5B80;
		opacity: 1;

		// background: #E9EBF4;
	}
</style>
